<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>AJAX实现简单的读取文本文档内容到网页</title>
	<style type="text/css">
		#container{
			height: 100px;
			box-shadow: 0 0 5px #666;
			margin-top:15px;
		}
	</style>
</head>
<body>
	<section id="container"></section>
	<br />
	<input type="button" value="查看读取到的内容" onclick="readTxt()" />
	
	<script type="text/javascript">
		var containerTxt = document.getElementById("container");
		
		function readTxt(){
			var xhr = new XMLHttpRequest();
			xhr.open('GET',"ajaxDemo.txt",true);
			xhr.send();
			xhr.onreadystatechange = function(){
				if(xhr.readyState == 4 && xhr.status == 200){
					alert("请求服务器数据成功且返回数据成功");
					containerTxt.innerHTML = xhr.responseText;
				}else{
					console.log(xhr.status);
				}
			}
		}
	</script>
</body>
</html>